<template>
	<div class="detailpaylook">
		<el-breadcrumb class="bread-title" style="font-size:14px;">
			<el-breadcrumb-item>财务结算</el-breadcrumb-item>
			<el-breadcrumb-item>支付板块</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/thirdpay' }">第三方支付查询</el-breadcrumb-item>
			<el-breadcrumb-item>查询详情</el-breadcrumb-item>
		</el-breadcrumb>
		<h3>支付信息</h3>
		<table cellpadding="0" cellspacing="0">
			<tbody>
				<tr>
					<td class="active">交易流水</td>
					<td>{{tableData.serialNum}}</td>
					<td class="active">订单号</td>
					<td>{{tableData.orderCode}}</td>
					<td class="active">购房者</td>
					<td>{{tableData.customerName}}</td>
				</tr>
				<tr>
					<td class="active">支付时间</td>
					<td>{{tableData.paymentTime |initTime}}</td>
					<td class="active">对方账户</td>
					<td>{{tableData.opposingAccount}}</td>
					<td class="active">对方名称</td>
					<td>{{tableData.otherName}}</td>
				</tr>
				<tr>
					<td class="active">支付状态</td>
					<td>{{tableData.paymentStatus |initPayStatus}}</td>
					<td class="active">实收金额(元)</td>
					<td>{{tableData.payNum |initMoney}}</td>
					<td class="active">支付方式</td>
					<td>{{tableData.paymentMethod |initPayMethod}}</td>
				</tr>
				<tr>
					<td class="active">卡的类型</td>
					<td>{{tableData.cardType |initType}}</td>
					<td class="active">所属银行</td>
					<td>{{tableData.cardType |initType}}</td>
					<td class="active">银行卡号</td>
					<td>{{tableData.bankCard}}</td>
				</tr>
				<tr>
					<td class="active">交易场景</td>
					<td>{{tableData.tradingScenario |inittradingScenario}}</td>
					<td class="active"></td>
					<td></td>
					<td class="active"></td>
					<td></td>
				</tr>
			</tbody>
		</table>
		<div>
			<h3 v-if="tableData.paymentStatus==3 || tableData.paymentStatus==4 || tableData.paymentStatus==5">退款信息</h3>
			<table cellpadding="0" cellspacing="0" v-if="tableData.paymentStatus==3 || tableData.paymentStatus==4 || tableData.paymentStatus==5">
				<tbody>
					<tr v-if="tableData.paymentStatus==1 || tableData.paymentStatus==2">
						<td class="active">退款申请时间</td>
						<td>————</td>
						<td class="active">退款金额（元）</td>
						<td>————</td>
						<td class="active">退款状态</td>
						<td>————</td>
					</tr>
					<tr v-if="tableData.paymentStatus==1 || tableData.paymentStatus==2">
						<td class="active">退款方式</td>
						<td>————</td>
						<td class="active"></td>
						<td></td>
						<td class="active"></td>
						<td></td>
					</tr>
					<tr v-if="tableData.paymentStatus==3 || tableData.paymentStatus==4 || tableData.paymentStatus==5">
						<td class="active">退款申请时间</td>
						<td>{{tableData.paymentTime |initTime}}</td>
						<td class="active">退款金额(元)</td>
						<td>{{tableData.payNum |initMoney}}</td>
						<td class="active">退款状态</td>
						<td>{{tableData.paymentStatus |initpaymentStatus}}</td>
					</tr>
					<tr v-if="tableData.paymentStatus==3 || tableData.paymentStatus==4 || tableData.paymentStatus==5">
						<td class="active">退款方式</td>
						<td>{{tableData.paymentMethod |initpaymentMethod}}</td>
						<td class="active"></td>
						<td></td>
						<td class="active"></td>
						<td></td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</template>

<script>
	import utils from "../../common/utils"
	export default{
		name:"thirdpaydetail",
		data(){
			return {
				id:this.$route.query.id,
				tableData:""
			}
		},
		methods:{
			loadData(){
				this.$axios.get(`/raise/dealingOpposingOrder/selectDealingOpposingOrderDetail/${this.id}`).then(res => {
	                this.tableData=res;
	            });
			}
		},
		filters: {
            initTime(val){
            	if(val){
            		return utils.getTimeString(val)
            	}
            },
            initMoney(time){
            	if(time!=0&&time!=""&&time!=null){
					let tempValue = parseFloat(time)
        			return tempValue.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
				}
            },
            initPayStatus(status){
            	if(status==1){
            		return "支付成功"
            	}else if(status==2){
            		return "支付失败"
            	}else if(status==3){
            		return "退款成功"
            	}else if(status==4){
            		return "退款中"
            	}else{
            		return ""
            	}
            },
            initPayMethod(val){
            	if(val==0){
            		return "微信"
            	}else if(val==1){
            		return "支付宝"
            	}else if(val==2){
            		return "合支付"
            	}else if(val==3){
            		return "通联"
            	}else if(val==4){
            		return "POS"
            	}else{
            		return ""
            	}
            },
            initType(val){
            	if(val==0){
            		return "通联"
            	}else{
            		return ""
            	}
            },
            inittradingScenario(val){
            	if(val==0){
            		return "app"
            	}else if(val==1){
            		return "pos"
            	}else{
            		return ""
            	}
            },
            initpaymentStatus(val){
            	if(val==3){
            		return "退款成功"
            	}else if(val==4){
            		return "退款中"
            	}else if(val==5){
            		return "退款失败"
            	}else{
            		return ""
            	}
            },
            initpaymentMethod(val){
            	if(val==0){
            		return "原路退回"
            	}else if(val==1 || val==2 || val==3 || val==4){
            		return "————"
            	}else{
            		return ""
            	}
            }
        },
		mounted(){
			this.loadData();
		}
	}
</script>

<style lang="stylus">
	.detailpaylook{
		table{
			border-top:1px solid #ccc;
			border-left:1px solid #ccc;
			border-collapse:collapse;
			width:100%;
			tr{
				display:flex;
			}
			td{
				border-bottom:1px solid #ccc;
				border-right:1px solid #ccc;
				padding:8px 0;
				flex:1;
				text-align:center;
			}
			.active{
				background:rgba(242,242,242,1);
			}
		}
	}
</style>
